import { Select } from 'antd';
import React from 'react';

export default () => {
    const onLoad = () => {
        const iframe = document.querySelector('iframe') as HTMLIFrameElement
        iframe.style.height = 'auto'
        setTimeout(() => {
            /** 自适应不支持从大到小的高度变化 */
            iframe.style.height = iframe.contentDocument?.body.scrollHeight + 'px'
        })
    }
    const [activeIframe, setActiveIframe] = React.useState('/iframe/test2.html')
    return (
        <div>
            <Select className="mb20" value={activeIframe} onSelect={(value) => setActiveIframe(value)} style={{ width: 200 }}>
                <Select.Option value="/iframe/test2.html">小页面</Select.Option>
                <Select.Option value="/iframe/test.html">大页面</Select.Option>
            </Select>
            <br/>
            <iframe title="test" id="iframe" src={activeIframe} onLoad={onLoad} frameBorder="0" ></iframe>
        </div>
    )
}